<template>
  <a-row :gutter="[20, 20]">
    <a-col :span="24">
      <div class="u-flex u-row-between">
        <span class="u-page-title">菜单管理</span>
        <div>
          <a-button class="u-m-r-10" @click="handleShowModuleList"
            >查看模块</a-button
          >
          <a-dropdown placement="bottomRight">
            <template #overlay>
              <a-menu>
                <a-menu-item key="1" @click="handleShowCreateModule">
                  <MacCommandOutlined />
                  新增模块
                </a-menu-item>
                <a-menu-item key="2" @click="handleShowCreateMenu">
                  <MenuOutlined />
                  新增菜单
                </a-menu-item>
              </a-menu>
            </template>
            <a-button type="primary">
              新增
              <DownOutlined />
            </a-button>
          </a-dropdown>
        </div>
      </div>
      <div class="u-m-t-20 u-table-repo">
        <a-form layout="vertical">
          <a-row justify="end" :gutter="[20, 20]">
            <a-col :span="6">
              <a-form-item label="">
                <a-select
                  placeholder="请选择所属模块"
                  v-model:value="searchForm.moduleId"
                  @change="handleSearch"
                >
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option
                    v-for="moduleItem in moduleList"
                    :key="moduleItem.id"
                  >
                    {{ moduleItem.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="">
                <a-select
                  placeholder="请选择菜单状态"
                  v-model:value="searchForm.status"
                  @change="handleSearch"
                >
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option
                    v-for="statusItem in MenuStatus"
                    :key="statusItem.value"
                  >
                    {{ statusItem.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="">
                <a-input
                  placeholder="请输入菜单名称"
                  allowClear
                  v-model:value="searchForm.keyword"
                  @change="handleSearch"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <a-table
          :loading="menuTableLoading"
          :columns="TABLE_COLUMNS"
          :dataSource="menuList"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <status-tag type="menuStatus" :status="record.status" />
            </template>
            <template v-if="column.key === 'action'">
              <a-button
                type="primary"
                size="small"
                @click="handleShowEditMenu(record)"
              >
                <template #icon>
                  <edit-outlined />
                </template>
              </a-button>
              <a-popconfirm
                v-if="record.canDelete === 1"
                placement="top"
                ok-text="Yes"
                cancel-text="No"
                title="确定要禁用该菜单吗?"
                @confirm="() => handleRemoveMenu(record.id)"
              >
                <a-button class="u-m-l-6" type="primary" danger size="small">
                  <template #icon>
                    <delete-outlined />
                  </template>
                </a-button>
              </a-popconfirm>
            </template>
          </template>
        </a-table>
      </div>
      <!-- add menu -->
      <menu-modal
        :actionType="menuActionType"
        :modulesList="moduleList"
        v-model:visible="showMneuModal"
        :data="menuModalData"
        :title="menuModalTitle"
        :loading="menuModalLoading"
        @submit="handleMenuModalConfirm"
      />
      <!-- add module -->
      <module-modal
        v-model:visible="showModuleModal"
        :data="createModuleForm"
        title="创建模块"
        @submit="handleConfirmCreateModule"
      />

      <!-- module list -->
      <module-list
        title="模块列表"
        :dataList="moduleList"
        v-model:visible="showModuleList"
      />
    </a-col>
  </a-row>
</template>
<script lang="ts" setup>
import {
  DownOutlined,
  MacCommandOutlined,
  MenuOutlined,
  EditOutlined,
  DeleteOutlined,
} from "@ant-design/icons-vue";

import { MenuStatus } from "@common/dict/Settings";
import MenuModal from "@comps/menu-modal/index.vue";
import ModuleModal from "@comps/module-modal/index.vue";
import ModuleList from "@comps/module-list/index.vue";
import StatusTag from "@comps/status-tag/index.vue";

import useModules from "./useModules";
import useMenus from "./useMenus";

const TABLE_COLUMNS = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "URL",
    dataIndex: "url",
    key: "url",
  },
  {
    title: "模块",
    dataIndex: "moduleName",
    key: "moduleName",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
  },
  {
    title: "操作",
    key: "action",
  },
];

const {
  showModuleModal,
  showModuleList,
  moduleList,
  createModuleForm,
  getModuleList,
  handleShowCreateModule,
  handleShowModuleList,
  handleConfirmCreateModule,
} = useModules();

const {
  menuModalLoading,
  menuModalTitle,
  menuActionType,
  menuModalData,
  menuTableLoading,
  menuList,
  showMneuModal,
  searchForm,
  handleShowCreateMenu,
  handleShowEditMenu,
  getAllMenu,
  handleMenuModalConfirm,
  handleRemoveMenu,
  handleSearch,
} = useMenus();

const init = () => {
  getAllMenu();
  getModuleList();
};

init();
</script>
